<template>
	<scroll-view class="backview" scroll-y="true">
		<view class="top-back">
			<view class="top-arrow-back" @click="prevMonth">
				<image class="arrow-img" src="../../../static/pc_arrow_left.png"></image>
			</view>
			<view class="top-name">{{time.year}}年{{time.month + 1}}月</view>

			<view class="top-arrow-back" @click="nextMonth">
				<image class="arrow-img" src="../../../static/pc_arrow_right.png"></image>
			</view>
			<view class="top-right top-right-left" @click="selectAction">
				<view class="top-contnet">筛选案件</view>
				<image class="top-icon" src="../../../static/select.png"></image>
			</view>
			<view class="top-right " @click="addAction" v-if="role!=0">
				<view class="top-add">新增日程</view>
			</view>

		</view>
		<view class="content-back">
			<view class="flex">
				<view class="flex-item flex" v-for="item in weeks" :key="item">
					<text class="week">{{item}}</text>
				</view>
			</view>
			<view class="flex-wrap">
				<template v-for="(item,index) in visibleDays" :Key="item.day">
					<view class="day-box flex-column">

						<text class="day" @click="clickDate(item.day)" :style="[
							isToday(item.day) && todayObj,
							isClick(item.day) && selectedObj,
						]" :class="[
							{selected: isClick(item.day)},
							{notCurrentMonth: !isCurrentMonth(item.day)}
						]">{{item.day | dayFilter}}</text>
						<template v-if="showText">
							<text v-if="isCurrentMonth(item.day)" class="day-text" :style="{color: textColor}">
								{{item.data.value || ''}}
							</text>
						</template>
						<template v-if="showDot">
							<text v-if="isCurrentMonth(item.day) && item.data.dot && item.data.active"
								class="day-dot"></text>
							<text v-if="isCurrentMonth(item.day) && item.data.dot && !item.data.active"
								class="day-dot dot-gray"></text>
						</template>
						<scroll-view class="scrollview" :scroll-y="item.events.length > 2?true:false">
							<view class="item-view" v-for="(ite, idx) in item.events" @click="eventAction($event,ite)"
								:key="idx">
								<text class="item-view-text">{{ite.times}}
									<text>' '</text>
									{{ite.titles}}</text>
							</view>
						</scroll-view>
					</view>
				</template>
			</view>
		</view>
		<view style="width: 100%;height: 20px;"></view>

		<pop-select v-model="showEvent" :x="eventx" :y="eventy" :placement="eventx>300?(isBottom?'bottom-end':'top-end'):(isBottom?'bottom-start':'top-start')" dynamic>
			<view class="pop-event-back">
				<view class="pop-event-top">
					<view class="pop-event-name">日程详情</view>
					<view class="pop-event-edit" v-if="role!=0" @click="clickEdit()">编辑</view>
					<view class="pop-event-del" v-if="role!=0" @click="deleteIt()">删除</view>
				</view>
				<view class="pop-event-title">
					{{eventActionDate.title}}
				</view>
				<view class="pop-event-item">
					<image class="pop-img" src="../../../static/pc_tabbar_time.png"></image>
					<view class="pop-event-time">{{eventActionDate.beginTime}}-{{eventActionDate.endTime}}</view>
				</view>
				<view class="pop-event-item">
					<image class="pop-img" src="../../../static/pc_schedul_people.png"></image>
					<view class="pop-event-time pop-event-pople">{{eventActionDate.joinType.desc}}</view>
				</view>
				<view class="pop-event-item">
					<image class="pop-img" src="../../../static/phone/phone_dingling.png"></image>
					<view class="pop-event-time pop-event-pople">15分钟前提醒</view>
				</view>
				<view class="pop-event-item">

					<view class="pop-event-time pop-event-pople">所属案件</view>
					<view class="pop-event-del pop-event-show" @click="checkCase">查看</view>

				</view>
			</view>

		</pop-select>
		<caseSelect v-if="showCaseSelect" @caseSelectClose='clickCaseSelectClose'
			@clickCustomerAction="clickCustomerAction"> </caseSelect>
		<addPop v-if="showAdd" v-on:successBack='updataRequest()' @addClose='addCloseAction' :types="types"
			:eventActionDateDetail="eventActionDateDetail"></addPop>
	</scroll-view>
</template>

<script>
	import popSelect from '@/components/popSelect/popSelect.vue'
	import caseSelect from "@/packageC/PhonePC/schedule/caseSelect.vue"
	import addPop from "@/packageC/PhonePC/schedule/addSchedule.vue"
	const getYearMonthDay = (date) => {
		let year = date.getFullYear();
		let month = date.getMonth();
		let day = date.getDate();
		return {
			year,
			month,
			day
		}
	}
	const getDate = (year, month, day) => {
		return new Date(year, month, day)
	}
	export default {
		components: {
			popSelect,
			caseSelect,
			addPop
		},
		data() {
			return {
				role: '',
				roleUrl: '',
				iArr: [1, 2, 3, 4, 5, 6],
				jArr: [1, 2, 3, 4, 5, 6, 7],
				value: new Date(),
				weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				click_time: {},
				month_data: this.extraData,
				time: this.defaultTime,
				todayObj: {
					background: this.bgColor,
					color: '#ffffff'
				},
				selectedObj: {
					background: this.selColor,
					color: '#ffffff'
				},
				showEvent: false,
				eventx: 0,
				eventy: 0,
				showCaseSelect: false,
				showAdd: false,

				types: '', //add-新增 edit-编辑

				eventActionDate: null,
				eventActionDateDetail: null,
				isBottom: false
			}
		},
		props: {
			bgColor: {
				type: String,
				default: '#2DA9C5'
			},
			selColor: {
				type: String,
				default: '#2DA9C5'
			},
			textColor: {
				type: String,
				default: '#2DA9C5'
			},
			defaultTime: {
				type: Object,
				default: () => {
					return {
						year: getYearMonthDay(new Date()).year,
						month: getYearMonthDay(new Date()).month
					}
				}
			},
			extraData: {
				type: Array,
				default: () => {
					return [] // {date: '2020-6-3', value: '签到', dot: true, active: true}
				}
			},
			showText: {
				type: Boolean,
				default: true
			},
			showDot: {
				type: Boolean,
				default: false
			}
		},
		filters: {
			dayFilter(val) {
				return val.getDate();
			}
		},
		watch: {
			extraData: {
				handler(newV, oldV) {
					if (newV !== oldV) {
						this.month_data = newV
					}
				},
				deep: true
			}
		},
		computed: {
			visibleDays: {
				get() {
					let {
						time: {
							year,
							month
						},
						month_data
					} = this;
					let currentFirstDay = getDate(year, month, 1);
					let week = currentFirstDay.getDay();
					let startDay = currentFirstDay - week * 60 * 60 * 1000 * 24;
					let arr = [];
					for (let i = 0; i < 42; i++) {
						let day = new Date(startDay + i * 60 * 60 * 1000 * 24);
						let {
							year: dayY,
							month: dayM,
							day: dayD
						} = getYearMonthDay(day);
						let data = {};
						for (let item of month_data) {
							let dateString = item.date;
							let dateArr = dateString.indexOf('-') !== -1 ?
								dateString.split('-') :
								dateString.indexOf('/') !== -1 ?
								dateString.split('/') : [];
							if (dateArr.length === 3 &&
								Number(dateArr[0]) === Number(dayY) &&
								Number(dateArr[1]) === (Number(dayM) + 1) &&
								Number(dateArr[2]) === Number(dayD)) {
								data = item
							}
						}
						let obj = {
							day,
							data
						}
						arr.push(obj)
					}
					return arr
				},
				set(value) {
					console.log('set', value)
					return value
				},
			}

		},
		mounted() {

		},
		onLoad() {
			this.role = getApp().globalData.role
			this.roleUrl = this.$roleUrl({
				tab: this.role
			})


		},
		onShow() {
			let _this = this
			setTimeout(function() {
				console.log('当前日期', _this.time)
				_this.requestData();
			}, 500);

		},

		methods: {
			async updataRequest() {
				this.requestData()
			},
			//网络请求
			async requestData() {
				let _this = this
				let parmas = {
					size: 10000,
				}
				console.log(parmas)
				const res = await this.$myRequest({
					url: `/${_this.roleUrl}/caseTodo/listByMonth/${_this.time.year}/${_this.time.month+1}`,
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {

					console.log('日期', _this.visibleDays)
					let list = res.data.data
					let dateList = _this.visibleDays
					for (var i = 0; i < dateList.length; i++) {
						let {
							year: y,
							month: m,
							day: d
						} = getYearMonthDay(dateList[i]['day']);

						for (var j = 0; j < list.length; j++) {
							let event = []
							if (getYearMonthDay(dateList[i]['day'])['year'] == list[j]['year'] &&
								(getYearMonthDay(dateList[i]['day'])['month'] + 1) == list[j]['month'] &&
								getYearMonthDay(dateList[i]['day'])['day'] == list[j]['day']) {
								if (list[j]['isExistSchedule']['code'] == '1') {
									console.log('今天有事件', list[j]['caseTodoVOList'])
									let val = list[j]['caseTodoVOList']
									for (var k = 0; k < val.length; k++) {
										let times = val[k].beginTime
										let titles = val[k].title
										times = times.substring(11, 16)
										val[k].times = times
										if (titles.length > 8) {
											titles = titles.substring(0, 8) + '...'
										}
										val[k].titles = titles
										event.push(val[k])
									}
									dateList[i]['events'] = event

								}

							}

						}

					}
					_this.visibleDays = dateList
					_this.clickDate(new Date())
				}
			},


			//新增
			addAction() {
				this.types = 'add'
				this.showAdd = true;
			},

			/**
			 * 删除
			 */
			async deleteIt() {
				let _this = this
				let params = {
					ids: _this.eventActionDate.id
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseTodo`,
					method: 'DELETE',
					data: params
				})
				console.log('删除', res)
				if (res.data.code == 200) {
					uni.showToast({
						title: '删除成功!',
						icon: "success",
						duration: 1500
					})
					_this.requestData();

				}
			},
			/**
			 * 点击了编辑
			 */
			async clickEdit() {
				this.types = 'edit'

				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseTodo/${_this.eventActionDate.id}`,
					method: 'GET'
				})
				console.log('日程详情', res)
				if (res.data.code == 200) {
					let data = res.data.data
					let tipsTimes = data.tipsTimes
					let tips = ''
					for (var i = 0; i < tipsTimes.length; i++) {
						tips = tips + tipsTimes[i]['desc'] + ','
					}
					if (tips.length > 1) {
						tips = tips.substring(0, tips.length - 1)
					}
					data.tips = tips
					_this.eventActionDateDetail = data

					_this.showEvent = false
					_this.showAdd = true;

				}

			},

			/**
			 * 点击查看所属案件
			 */
			checkCase() {
				let caseId = this.eventActionDate.caseId

			},




			addCloseAction(data) {
				this.showAdd = false;
				console.log(data)
				if (data) {
					this.requestData()
					//来自新增，需要刷新数据
				}
			},
			//筛选
			selectAction() {
				this.showCaseSelect = true;
			},

			clickCaseSelectClose() {
				this.showCaseSelect = false;
			},
			clickCustomerAction(data) {
				this.showCaseSelect = false;
				console.log(data)
			},
			eventAction(e, ite) {
				console.log(e)
				console.log(ite)
				this.eventx = e.touches[0].clientX
				this.eventy = e.touches[0].clientY + 4
				this.eventActionDate = ite
				this.showEvent = !this.showEvent
				this.isBottom = false;
				uni.getSystemInfo({
					success: (res) => {
						console.log(res.windowHeight, this.eventy)
						if (res.windowHeight - this.eventy < 400) {
							this.isBottom = true;
						}
					}
				})


			},


			isCurrentMonth(date) { // 是否当月
				let {
					year,
					month
				} = getYearMonthDay(getDate(this.time.year, this.time.month, 1));
				let {
					year: y,
					month: m
				} = getYearMonthDay(date);
				return year === y && month === m;
			},
			isToday(date) { // 是否当天
				let {
					year,
					month,
					day
				} = getYearMonthDay(new Date());
				let {
					year: y,
					month: m,
					day: d
				} = getYearMonthDay(date);
				return year === y && month === m && day === d;
			},
			isClick(date) { // 是否是点击日期
				let {
					click_time
				} = this;
				if (!click_time.day) return false;
				let {
					year,
					month,
					day
				} = getYearMonthDay(getDate(click_time.year, click_time.month, click_time.day));
				let {
					year: y,
					month: m,
					day: d
				} = getYearMonthDay(date);
				return year === y && month === m && day === d;
			},
			clickDate(date) { // 点击日期
				let {
					year,
					month,
					day
				} = getYearMonthDay(date);
				this.click_time = {
					year,
					month,
					day
				};
				this.$emit('calendarTap', {
					year,
					month,
					day
				})
			},
			prevMonth() { // 上一月
				let {
					time: {
						year,
						month
					}
				} = this;
				let d = getDate(year, month, 1);
				d.setMonth(d.getMonth() - 1);
				this.time = getYearMonthDay(d);
				// this.click_time = {};
				this.$emit('monthTap', getYearMonthDay(d))
				this.requestData()
			},
			nextMonth() { // 下一月
				// 获取当前的年月的日期
				let {
					time: {
						year,
						month
					}
				} = this;
				let d = getDate(year, month, 1);
				d.setMonth(d.getMonth() + 1);
				this.time = getYearMonthDay(d);
				// this.click_time = {};
				this.$emit('monthTap', getYearMonthDay(d))
				this.requestData()
			},
			//改变月份
			monthChange(e) {
				let {
					value
				} = e.detail;
				let timeArr = value.split('-');
				this.time = {
					year: timeArr[0],
					month: timeArr[1] - 1,
					day: 1
				};
				this.$emit('monthTap', {
					year: timeArr[0],
					month: timeArr[1] - 1,
					day: 1
				})
			}
		}
	}
</script>

<style scoped>
	page:before {
		content: '';
		position: fixed;
		left: 0;
		top: 0px;
		width: 100%;
		height: 2px;
		background-color: #eee;
		z-index: 9;
	}

	.backview {
		background-color: white;
		width: 100vw;
		height: 100vh;

	}

	.top-back {
		display: flex;
		align-items: center;
		height: 70px;

	}

	.content-back {
		margin-left: 11rpx;
		width: 728rpx;
		margin-right: 11rpx;

	}

	.top-name {
		font-size: 20px;
		font-weight: 600;
		color: #2DA9C5;
		margin-left: 10rpx;
	}



	.top-contnet {
		font-size: 14px;
		font-weight: 400;
		color: #999;
	}


	.top-icon {
		width: 16px;
		height: 16px;
	}

	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 11rpx;
		margin-left: 11rpx;
	}

	.top-right-left {
		margin-left: auto;
	}

	.top-add {
		width: 104px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.uni-container {
		margin-left: 40px;
		margin-right: 16px;
		width: auto;
	}

	.arrow-img {
		width: 24px;
		height: 24px;
	}

	.top-arrow-back {
		margin-left: 16px;
		width: 24px;
		height: 24px;

	}

	.content {
		width: 750rpx;
		margin: 0 auto;
	}

	.flex {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}

	.flex-wrap {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}

	.flex-column {
		width: 102rpx;
		height: 114px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;

	}

	.flex-item {
		flex: 1;
		border: 1px solid #EEEEEE;
		width: 102rpx;
		height: 40px;
	}

	.bold {
		font-weight: bold;
		font-size: 28rpx;
	}

	.year-month {
		width: 400rpx;
		margin: 0 auto 20rpx;
		padding-top: 20rpx;
	}

	.week {
		width: 100%;
		height: 40px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F7F7F7;

		font-size: 18px;
		font-weight: 600;
		color: #333333;
	}

	.day-box {
		width: 102rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		border: 1rpx solid #EEEEEE;
	}

	.day {
		width: 28px;
		height: 28px;
		line-height: 28px;
		border-radius: 50%;
		text-align: center;
		font-weight: 600;
		right: 0px;
		margin-right: 10px;
		margin-left: auto;
		margin-top: 10px;

	}

	.day-text {
		font-size: 22rpx;
	}

	.day-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background: #4cd964;

	}

	.today,
	.selected {
		background: #2DA9C5;
		color: #ffffff;
	}

	.notCurrentMonth {
		color: #999999;
		pointer-events: none;
		background: none;
	}

	.scrollview {
		width: 100%;
		max-height: 68px;
		margin-bottom: 0px;
		margin-top: auto;
	}

	.item-view {
		width: 100%;
		height: 32px;
		margin-top: 4px;
		border-left: 4px solid #2DA9C5;
		background: #E8F7FB;
		display: flex;
		align-items: center;
	}

	.item-view-text {
		margin-left: 5px;
		font-size: 12px;
		font-weight: 400;
		color: #2DA9C5;
		display: inline-block;
		white-space: nowrap;
		/* width: 100%;	 */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
	/deep/::-webkit-scrollbar {
		width: 4px !important;
		height: 10px !important;
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	/deep/::-webkit-scrollbar-track {
		border-radius: 5px !important;
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/*定义滑块 内阴影+圆角*/
	/deep/::-webkit-scrollbar-thumb {
		border-radius: 2px !important;
		background-color: #ddd !important;
	}

	.pop-event-back {
		padding-bottom: 10px;
	}

	.pop-event-top {
		margin: 10px;

		display: flex;
		align-items: center;
	}

	.pop-event-name {
		font-size: 14px;
		font-weight: 400;
		color: #333333;
	}

	.pop-event-edit {
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
		margin-right: 8px;
		margin-left: auto;
	}

	.pop-event-del {
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
		margin-right: 0px;
		margin-left: 8px;
	}

	.pop-event-title {
		margin-left: 10px;
		width: 270px;
		max-width: 270px;
		margin-right: 10px;
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.pop-event-item {
		margin-left: 10px;
		display: flex;
		align-items: center;
		margin-top: 6px;

	}

	.pop-img {
		width: 16px;
		height: 16px;
		min-width: 16px;
		margin-right: 2px;
	}

	.pop-event-time {
		font-size: 14px;
		font-weight: 400;
		color: #666666;
	}

	.pop-event-pople {
		color: #333333;
	}

	.pop-event-show {
		margin-left: 5px;
		margin-right: auto;
	}
</style>
